<template>
    <div class="newslist">
        <myheader :title="title" :back="back" :more="more"></myheader>
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <ul class="mui-table-view">
                        <router-link tag="li" :to="'/home/newsinfo/'+item.id" class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
                            <a href="javascript:;">
                                <img class="mui-media-object mui-pull-left" :src="item.img_url">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>
                                        {{item.title}}
                                    </p>

                                    <p>
                                        <span class="addtime">发表时间：{{item.add_time |dateFormat('YYYY-MM-DD')}}</span>
                                        <span class="click">点击：{{item.click}}</span>
                                    </p>
                                </div>
                            </a>
                        </router-link>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import myheader from '../../components/Header'
    import {Toast} from 'mint-ui'
    export default {
        name: "NewsList",
        data(){
          return{
              title:'新闻列表',
              back:true,
              more:false,
              newslist:[]
          }
        },
        components:{
            myheader
        },
        methods:{
            getNewList(){ //这个方法用来获取新闻列表数据，并且需要在页面加载的时候自动获取
               this.$http.get('api/getnewslist').then(response=>{
                   console.log(response);
                   this.newslist = response.body.message
               },error=>{
                    Toast('获取列表数据失败')
               })
            }
        },
        created(){   //页面加载的时候自动获取
            this.getNewList()
        }
    }
</script>

<style scoped lang="scss">
    @import "../../assets/style";
.mui-card-content{
    .mui-card-content-inner{
        padding: 0;
        .mui-table-view{
            padding: 0 4px;
            .mui-media{
                a{
                    .mui-media-body{
                        .mui-ellipsis{
                            color: black;
                            font-weight: 800;
                        }
                        p{
                            font-size: 10px;
                            display: flex;
                            justify-content: space-between;
                             span{
                                 color: $primary-text-color;
                                 font-weight: 100;
                             }
                         }
                    }
                }

            }
        }

    }
}

</style>
